import React from 'react'
import { Row,Col,Icon,Button,Avatar,Dropdown,Menu,Breadcrumb,Modal,message} from 'antd';
// import { Router, Route, Link, hashHistory } from 'react-router';
import {Link} from 'react-router-dom';
import './index.less'
import Cookies from 'js-cookie';
import createHistory from 'history/createHashHistory'
import {connect} from 'react-redux'
import {setNavLeft} from'../../redux/action/index'
import BaseForm from '../../components/BaseForm/index'
import {fetch, post} from '../../my_axios/api'
const history = createHistory();
class Header extends React.Component{
    constructor(props){
        super(props);
        this.state={
            username:Cookies.get('user'),
            userNameForm:{
                name:''
            },
            userPwdForm:{
                old_password:'',
                new_password:''
            },
            updateOneselfVisible:false,
            updateOneselfFormList:[
                {
                    type: 'INPUT',
                    label: '姓名',
                    field: 'name',
                    placeholder: '请输入姓名',
                    initialValue: '',
                    rule: true,
                    colLayout: {
                        xs: {span: 24},
                        sm: {span: 24},
                        md: {span: 24},
                        lg: {span: 24},
                        xl: {span: 24},
                    },
                    formItemLayout: {
                        labelCol: {
                            xs: {span: 4},
                            sm: {span: 4},
                            md: {span: 4},
                            lg: {span: 4},
                            xl: {span: 4},
                        },
                        wrapperCol: {
                            xs: {span: 20},
                            sm: {span: 20},
                            md: {span: 20},
                            lg: {span: 20},
                            xl: {span: 20},
                        },
                    }
                }
            ],
            updateOneselfPWDVisible:false,
            updateOneselfPWDFormList:[
                {
                    type: 'INPUT',
                    label: '原密码',
                    field: 'old_password',
                    placeholder: '请输入密码',
                    initialValue: '',
                    rule: true,
                    colLayout: {
                        xs: {span: 24},
                        sm: {span: 24},
                        md: {span: 24},
                        lg: {span: 24},
                        xl: {span: 24},
                    },
                    formItemLayout: {
                        labelCol: {
                            xs: {span: 5},
                            sm: {span: 5},
                            md: {span: 5},
                            lg: {span: 5},
                            xl: {span: 5},
                        },
                        wrapperCol: {
                            xs: {span: 19},
                            sm: {span: 19},
                            md: {span: 19},
                            lg: {span: 19},
                            xl: {span: 19},
                        },
                    }
                },
                {
                    type: 'INPUT',
                    label: '新密码',
                    field: 'new_password',
                    placeholder: '请输入新密码',
                    initialValue: '',
                    rule: true,
                    colLayout: {
                        xs: {span: 24},
                        sm: {span: 24},
                        md: {span: 24},
                        lg: {span: 24},
                        xl: {span: 24},
                    },
                    formItemLayout: {
                        labelCol: {
                            xs: {span: 5},
                            sm: {span: 5},
                            md: {span: 5},
                            lg: {span: 5},
                            xl: {span: 5},
                        },
                        wrapperCol: {
                            xs: {span: 19},
                            sm: {span: 19},
                            md: {span: 19},
                            lg: {span: 19},
                            xl: {span: 19},
                        },
                    }
                }
            ],
        }
    }
    componentWillMount() {

    }
    updateOneselfUser=()=>{
        this.setState({
            updateOneselfFormList:[
                {
                    ...this.state.updateOneselfFormList[0],
                    initialValue:Cookies.get('user')
                },
            ]
        });
        this.setState({
            updateOneselfVisible:true
        })
    };
    updatePwd=()=>{
        this.setState({
            updateOneselfPWDVisible:true
        })
    };
    exit=()=>{
        window.localStorage.removeItem('token');
        history.push('/login');
    };
    onChangeToken=()=>{
        window.location.reload(true);
    }
    toggle=()=>{
        const {dispatch}=this.props;
        if(this.props.navLeft==='isNarrow'){
            dispatch(setNavLeft('default'));
        }else if(this.props.navLeft==='default'){
            dispatch(setNavLeft('isNarrow'));
        }
    };
    getButton=()=>{
        return this.props.navLeft==='isMobile'?null:
            <div className="button_col">
                <Button onClick={this.toggle}   className="trigger" icon={this.props.navLeft==='default' ?'menu-fold': 'menu-unfold'}>
                </Button>
                {/*<Breadcrumb style={{marginLeft:20}}>*/}
                    {/*<Breadcrumb.Item>*/}
                        {/*<Link to="/admin/home" style={{fontSize:20}}>首页</Link>*/}
                    {/*</Breadcrumb.Item>*/}
                    {/*{*/}
                        {/*this.props.breadcrumb.name!=='' ?<Breadcrumb.Item >*/}
                            {/*<Link to={this.props.breadcrumb.url}>{this.props.breadcrumb.name}</Link>*/}
                        {/*</Breadcrumb.Item>:null*/}
                    {/*}*/}

                {/*</Breadcrumb>*/}
            </div>

    };
    handleOk=()=>{
        this.updateOneselfFormRef.handleFormSubmit();
    };
    handleCancel=()=>{
        this.setState({
            updateOneselfVisible: false,
        });
    };
    handleOkPWD=()=>{
        this.updateOneselfPWDFormRef.handleFormSubmit();
    };
    handleCancelPWD=()=>{
        this.setState({
            updateOneselfPWDVisible: false,
        });
    };

    /**
     * 修改用户
     */
    handleOneselfForm=(fieldsValue)=>{
        let params = {
           'name':fieldsValue.name
        };
        post('user/update_self', params).then(res => {
            if (res.status === 'success') {
                message.success('修改成功');
                Cookies.set('user',fieldsValue.name);

                this.setState({
                    username:fieldsValue.name,
                    updateOneselfVisible: false
                });
            } else {
                message.error(res.data.message);
            }
        }).catch(err => {
            console.log(err);
        })
    };


    /**
     * 修改密码
     */
    handleOneselfPWDForm=(fieldsValue)=>{
        let params = {
            'old_password':fieldsValue.old_password,
            'new_password':fieldsValue.new_password,
        };
        post('user/change_password', params).then(res => {
            if (res.status === 'success') {
                message.success('修改成功');
                this.setState({
                    updateOneselfPWDVisible: false
                });
            } else {
                message.error(res.data.message);
            }
        }).catch(err => {
            console.log(err);
        })
    };

    render(){
        const menu=(
            <Menu>
                <Menu.Item style={{width:110}} key="1" onClick={this.updateOneselfUser}>
                    <Row>
                        <Col span={8}>
                            <Icon type="user" />
                        </Col>
                        <Col span={16}>
                            <span >修改用户</span>
                        </Col>
                    </Row>
                </Menu.Item>
                <Menu.Item style={{width:110}} key="2" onClick={this.updatePwd}>
                    <Row>
                        <Col span={8}>
                            <Icon type="key" />
                        </Col>
                        <Col span={16}>
                            <span >修改密码</span>
                        </Col>
                    </Row>
                </Menu.Item>
                <Menu.Item style={{width:110}} key="3" onClick={this.exit}>
                    <Row>
                        <Col span={8}>
                            <Icon type="logout" />
                        </Col>
                        <Col span={16}>
                            <span >退出</span>
                        </Col>
                    </Row>
                </Menu.Item>
            </Menu>
    );
        return(
            <div className="header">
                <Row>
                    <Col span={6}>
                        {this.getButton()}
                    </Col>
                    <Col span={18} className="header-right">
                        {/*<Button icon="reload" className="header-icon" ></Button>*/}
                        {/*<Button className="reload_button">*/}
                            {/*<Icon type="reload" />*/}
                        {/*</Button>*/}
                        <Icon style={{fontSize:23,paddingRight:20,}} type="reload" onClick={this.onChangeToken}/>
                        <Avatar style={{ color: '#fff', backgroundColor: '#1977e3',marginRight:10 }} icon="user"></Avatar>
                        <Dropdown overlay={menu} trigger={['click']}>
                            <span >
                                {this.state.username} <Icon type="down" />
                            </span>
                        </Dropdown>
                    </Col>
                </Row>
                <Modal
                    width={400}
                    title='修改用户'
                    visible={this.state.updateOneselfVisible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                    okText="确认"
                    cancelText="取消"
                >
                    <Row style={{paddingRight: 20,paddingTop:20}}>
                        <BaseForm
                            wrappedComponentRef={(inst) => this.updateOneselfFormRef = inst}
                            formList={this.state.updateOneselfFormList}
                            formSubmit={this.handleOneselfForm}></BaseForm>
                    </Row>
                </Modal>
                <Modal
                    width={400}
                    title='修改密码'
                    visible={this.state.updateOneselfPWDVisible}
                    onOk={this.handleOkPWD}
                    onCancel={this.handleCancelPWD}
                    destroyOnClose={true}
                    okText="确认"
                    cancelText="取消"
                >
                    <Row style={{paddingRight: 10}}>
                        <BaseForm
                            wrappedComponentRef={(inst) => this.updateOneselfPWDFormRef = inst}
                            formList={this.state.updateOneselfPWDFormList}
                            formSubmit={this.handleOneselfPWDForm}></BaseForm>
                    </Row>
                </Modal>
            </div>
        )
    }
}
const mapStateToProps= (state)=>{
    return{
        navLeft:state.navLeft,
        breadcrumb:state.breadcrumb,
    }
};
export default connect(mapStateToProps)(Header);